<template>
  <div class="zhiboxitong">
    <top></top>
    <div class="flex zhiboxitong_content">
      <div class="left">
        <left></left>
      </div>
      <div class="right">
        <div class="zhiboxitong_right">
          <div class="flex">
            <el-button type="danger" size="medium" @click="goid('/zhiboxitong/zhiboxiaoshou/zhiboxiaoshou_fabu')">发布直播销售页</el-button>
            <el-button type="danger" size="medium" @click="log = true">根据已有直播页创建</el-button>
          </div>
          <div class="zhiboxitong_table">
            <el-table :data="list" border style="width: 100%" align="center">
              <el-table-column prop='title' label="页面名称"></el-table-column>
              <el-table-column prop='title' label="页面类型"></el-table-column>
              <el-table-column prop='title' label="商家商品数"> </el-table-column>
              <el-table-column prop='title' label="PV"> </el-table-column>
              <el-table-column prop='title' label="UV"> </el-table-column>
              <el-table-column prop='title' label="今日销售"> </el-table-column>
              <el-table-column label="销售页链接" width="160px" align="center">
                <template slot-scope="scope">
                  <el-button size="mini" type="text">复制链接</el-button>
                  <el-button size="mini" type="text">下载二维码</el-button>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="180px" align="center">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="goid('/zhiboxitong/zhiboxiaoshou/zhiboxiaoshou_shangpin',scope.row.id)">管理商品</el-button>
                  <el-button size="mini" type="text" @click="goid('/zhiboxitong/zhiboxiaoshou/zhiboxiaoshou_fabu',scope.row.id)">编辑</el-button>
                  <el-button size="mini" type="text">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div style="text-align: right; padding: 10px 0;">
              <el-pagination background layout="total,prev, pager, next" :current-page="all.page" @current-change="fanye" :page-size="all.page_size"
               :total="total"></el-pagination>
            </div>
            
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="根据已有直播页发布页面" :visible.sync="log" width="700px">
      <div class="flex">
        <el-select v-model="tongbuall" placeholder="选择已有的直播页">
         <el-option v-for="item in list" :key="item.value" :label="item.name" :value="item.value"></el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="log = false">取消</el-button>
        <el-button type="primary" @click="tongbugo">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import moment from 'moment'
  import axios from "axios";
  import top from "./components/top.vue";
  import left from "./components/left.vue";
  export default {
    components: {
      top,left
    },
    name: "zhiboxitong",
    data() {
      return {
          list:[],
          tongbuall:"",
          log:false,

          all:{
            page:1,
            page_size:20
          }
      }
    },
    created() {
      this.getlist()
    },
    mounted() {

    },
    methods: {
      fanye:function(){
        this.all.page = 1
        this.getlist()
      },
      getlist:function(){
        axios.get("/api/web/store/list",{params:this.all})
          .then(response => {
            if(response.data.msg.code == 0){
              this.list = response.data.data.data
              this.total = response.data.data.total
            }else{
              this.$message.error(response.data.msg.info);
            }
          });
      }

    }
  }
</script>

<style scoped lang="scss">
  .zhiboxitong {
    background: #f2f2f2;
    min-height: 100vh;
    *{ box-sizing: border-box;}
    .zhiboxitong_content{
      height: calc(100vh - 70px);
      .left{width: 210px;background: #3A3E4B;height: 100%;}
      .right{ flex-grow: 1;padding: 10px;
        .zhiboxitong_right{
           height: calc(100vh - 90px); overflow: auto; background: #fff; border-radius: 5px; padding: 20px;
        }
        .zhiboxitong_table{ margin-top: 20px;}
      }
    }

    .flex {
      display: flex;
      flex-wrap: wrap;
    }

    .flexb {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .flexc {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    .flexbc {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }

    .flexcc {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
  }
</style>
